<template>
  <div class="loanHistory">
    <assets-head :title="$t('借贷记录')" />
    <!--      Tab区域-->
    <div class="tabMenu flex justify-start items-center">
      <div class="tabList">
        <div class="tab" :class="item.id === activeTabIndex ? 'activeTab' : ''" v-for="item in tabMenuList" :key="item.id"
             @click="changeTab(item)">
          <span>{{ item.menuName }}</span>
        </div>
      </div>
    </div>
    <!--   container -->
    <div class="container px-32">
      <!--      列表区域-->
      <div v-if="loanOrderList&&loanOrderList.length>0">
        <div class="historyData flex justify-between py-40 border-b-grey textColor" v-for="item in loanOrderList" :key="item.id">
          <div class="left">
            <!--            <div class="mb-30">{{ $t('借贷人') }}: 张三</div>-->
            <div class="mb-30">
              <span>{{ $t('借款金额') }}: </span>
              <span :class="item.status ===5 ? 'text-red' :'text-green'">{{item.status ===5 ? '-' : '+' + item.quota}} {{ item.symbol}}</span>
            </div>
            <div class="mb-30">{{ $t('备注') }}: {{item.reason}}</div>
            <div v-if="item.state===2">{{ $i18n.locale==='en' ? 'Left Days' : $t('剩余天数') }}: {{item.remainQuota}}</div>
          </div>
          <div class="right text-center text-white">
            <div class="loanBtn mb-20" @click="$router.push('customerService')" v-if="item.state===2">{{ $t('申请还款') }}</div>
            <div class="loanBtn mb-20" :style="{ background: loanBgText(item.state) }" v-else>{{ loanText(item.state) }}</div>
            <div class="loanBtn" style="background: #00a7ee;" @click="getLoanDetail(item.id)">{{ $t('详情') }}</div>
          </div>
        </div>
      </div>
      <!--      无数据-->
      <div class="flex items-center flex-col" style="margin-top: 198px" v-else>
        <div class="noDataImg mb-24 ">
          <img src="@/assets/image/loan/noData.png" alt="nodData" />
        </div>
        <p class="textColor1">{{ $t('暂无数据') }}</p>
      </div>
    </div>

    <van-popup v-model="isDetail" class="w-full rounded-2xl" style="width: 94%">
      <div class="px-32 bg-white py-40">
        <div class="text-center font-36 font-700 py-20">
          {{ $t('订单详情') }}
        </div>
        <div class="loanList">
          <div class="flex justify-between py-30 border-b-grey" >
            <div>
              <span class="grayText">{{ $t('借款金额') }}</span>
            </div>
            <div class="flex align-center">
              <!--            <input class="font-600 textColor border-none text-right mr-14 mainBackground" v-model="loanAmount"  disabled="disabled" @input="inputAmunt" />-->
              <span class="mr-14 font-600 ">{{loanData.quota || 0}}</span>
              <span class="font-600 ">USDT</span>
            </div>
          </div>
          <div class="flex justify-between py-30 border-b-grey" >
            <div>
              <span class="grayText">{{ $t('还款周期') }}</span>
            </div>
            <div class="flex align-center text-right">
              <div class="font-600 ">
                <span>{{ loanData.term }} {{ $t('Day') }}</span>
              </div>
            </div>
          </div>
          <div class="flex justify-between py-30 border-b-grey" >
            <div>
              <span class="grayText">{{ $i18n.locale==='en' ? 'Daily Interest Rate' :$t('日利率')}}</span>
            </div>
            <div class="flex align-center">
              <span class="font-600">{{ loanData.dailyRate*1*100 || 0}}%</span>
            </div>
          </div>
          <div class="flex justify-between py-30 border-b-grey" >
            <div>
              <span class="grayText">{{ $t('还款方式') }}</span>
            </div>
            <div class="flex align-center">
              <span class="font-600 text-right">{{ $t('到期一次还款')}}</span>
            </div>
          </div>
          <div class="flex justify-between py-30 border-b-grey" >
            <div>
              <span class="grayText">{{ $t('利息') }}</span>
            </div>
            <div class="flex align-center">
              <span class="font-600">{{loanData.totalInterest || 0 }} USDT</span>
            </div>
          </div>
          <div class="flex justify-between py-30 border-b-grey">
            <div>
              <span class="grayText">{{ $t('放款机构') }}</span>
            </div>
            <div class="flex align-center">
              <span class="font-600">{{ loanData.lendingName }}</span>
            </div>
          </div>
          <div class="flex justify-between py-30 border-b-grey" >
            <div>
              <span class="grayText">{{ $t('状态') }}</span>
            </div>
            <div class="flex align-center">
              <span class="font-600" :style="{color:loanBgText(loanData.state)}">{{ loanText(loanData.state) }}</span>
            </div>
          </div>
          <div class="flex justify-between py-30 border-b-grey" v-if="loanData.state===2">
            <div>
              <span class="grayText">{{ $i18n.locale==='en' ? 'Left Days' :$t('剩余天数') }}</span>
            </div>
            <div class="flex align-center">
              <span class="font-600">{{ loanData.remainQuota }}</span>
            </div>
          </div>
          <div class="flex justify-between py-30 border-b-grey" >
            <div>
              <span class="grayText">{{ $t('已还款金额') }}</span>
            </div>
            <div class="flex align-center">
              <span class="font-600">{{ loanData.repaidQuota }}</span>
            </div>
          </div>          
          <div class="flex justify-between py-30" >
            <div>
              <span class="grayText">{{ $i18n.locale==='en' ? 'Order Time' :$t('订单时间') }}</span>
            </div>
            <div class="flex align-center">
              <span class="font-600">{{ dataTimeEx(loanData.createTime) }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head/index.vue";
import {_loanOrderList,_loanOrderDetail} from "@/API/fund.api"
import {Popup} from "vant";
import { dataTimeEx } from '@/utils/utis'
export default {
  name: "loanHistory",
  mounted() {
    this.getLoanOrderList()
  },
  methods: {
    //订单详情
    getLoanDetail(orderNo){
      _loanOrderDetail({
        orderNo:orderNo
      }).then(res=>{
        this.loanData = res.data
        this.isDetail=true
      })
    },
    getLoanOrderList(){
      _loanOrderList().then(res=>{
        this.loanOrderList=res.data.sort((a,b)=>b.createTime-a.createTime)
        this.loanAllOrderList=this.loanOrderList
      })
    },
    loanBgText(val){
      const bg = { '0': '#BBA635', '1': '#bba635', '2': '#00a7ee', '3': '#E35461', '4': '#b0b4bc', }
      // console.log('this.btnBg',bg[val])
      return bg[val]
    },
    loanText(val) {
      const loanStatus = { '1': this.$t('审批中'), '3': this.$t('审批失败'), '2': this.$t('还款中'), '4': this.$t('已逾期'), '5': this.$t('已还款'), }
      return loanStatus[val] || this.$t('审批中')
    },
    changeTab(item) {
      this.activeTabIndex = item.id
      if(item.id===0){
        this.loanOrderList = this.loanAllOrderList
      }else{
        this.loanOrderList = this.loanAllOrderList.filter(data=> data.state === item.id)
      }
    }
  },
  computed: {
  },
  data() {
    return {
      activeTabIndex: 0,
      isData: true,
      loanStatus: 0,
      btnBg: '',
      tabMenuList: [
        { id: 0, menuName: this.$t('全部') },
        { id: 1, menuName: this.$t('审批中') },
        { id: 3, menuName: this.$t('审批失败') },
        { id: 2, menuName: this.$t('还款中') },
        { id: 5, menuName: this.$t('已还款') },
      ],
      loanOrderList: [],
      loanAllOrderList: [],
      isDetail:false, //详情弹窗
      loanData:{},
      dataTimeEx,//时间戳格式化
    }
  },
  components: {
    assetsHead,
    [Popup.name]:Popup
  }
}
</script>

<style scoped lang="scss">
.loanHistory {
  width: 100%;
  box-sizing: border-box;
}

//隐藏滚动条
.tabMenu::-webkit-scrollbar {
  display: none
}

.tabMenu {
  border-top: 1px solid #F5F5F5;
  border-bottom: 1px solid #F5F5F5;
  padding: 30px;
  overflow: auto hidden;
  touch-action: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;

  .tabList {
    white-space: nowrap;
    padding-right: 30px;
    touch-action: auto;

    .tab {
      display: inline-block;
      color: #999999;
      height: 60px;
      line-height: 60px;
      text-align: center;
      transition: .5s;
      margin-right: 52px;
      border-radius: 34px;
      touch-action: auto;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border: 1px solid transparent;

      &.ani {
        transform: translate3d(0, 0, 0);
      }
    }
  }

  .activeTab {
    border-radius: 32px;
    padding: 0 36px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    @include themify() {
      border: 1px solid themed('active_line');
      color: themed('color_main');
    }
  }
}

.noDataImg {
  width: 165px;
  height: 160px;

  img {
    width: 100%;
    height: 100%;
  }
}

.loanBtn {
  padding: 14px 30px;
  background: #004aee;
  border-radius: 10px;
}</style>